<!--  -->
<template>
  <div class='home'>
    <!-- 上方画布的背景 -->
    <div class="slider-bg"></div>
    <!-- 顶部导航区域 -->
    <div class="title-nav">1231233</div>
    <div class="home-content">
      <!-- 固定顶部搜索框 -->
      <div class="inuput-search">
        <div class="inp">
          <i class="iconfont icon-sousuo"></i>
          <input type="search" :placeholder="hotSearch">
        </div>
        <div class="button">搜索</div>
      </div>
      <!-- 当前广告及很火的分类 -->
      <div class="hot-msg">
        <mt-badge size='small' color='#F2F3F5'>天天抽奖</mt-badge>
        <mt-badge size='small' color='#F2F3F5'>感恩节5折</mt-badge>
        <mt-badge size='small' color='#F2F3F5'>蒸菜</mt-badge>
        <mt-badge size='small' color='#F2F3F5'>烤鸭</mt-badge>
        <mt-badge size='small' color='#F2F3F5'>炸鸡</mt-badge>
        <mt-badge size='small' color='#F2F3F5'>烤肉饭</mt-badge>
      </div>
      <!-- 广告 -->
      <div class="advertising">
        <swiper :options="swiperOption">
          <!--  一个 swiper-slide 就相当于轮播图中的一面    -->
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising01.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising02.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising03.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising04.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising05.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising06.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising07.png" alt="广告">
            </div>
          </swiper-slide>
          <swiper-slide>
            <div class="swiper-item">
              <img src="~assets/images/广告/advertising08.png" alt="广告">
            </div>
          </swiper-slide>
          <!-- 导航 页码 -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      ---
      <br><br><br>
      ===
    </div>
    <!-- 下方导航区域 -->
    <tabbar checked='首页' />
  </div>
</template>

<script>
import Tabbar from 'components/common/Tabbar/Tabbar'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  data () {
    return {
      search: '',
      hotSearch: '浏阳蒸菜',
      // 轮播图的参数
      swiperOption: {
        //  导航页码的设置
        pagination: {
          // swiper 上的页码挂载在 .swiper-pagination 匹配到的元素上
          el: '.swiper-pagination'
        },
        // 自动切换
        autoplay: false,
        // 切换速度
        speed: 1000,
        // loop 模式 也就是当到最后一张时再点下一个就是第一张
        loop: true
      }
    }
  },
  methods: {
  },
  components: {
    Tabbar,
    Swiper,
    SwiperSlide
  }
}
</script>
<style lang='less' scoped>
.home {
  position: relative;
  height: 100vh;
  overflow: hidden;
  // background-color: green;
}
.title-nav {
  // background-color: #26a2ff;
  // opacity: 0.5;
  height: 3rem;
  margin-bottom: 0.8rem;
}
.home-content {
  background-color: red;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}

/* 顶部输入框的样式 */
.inuput-search {
  --back-color: #f2f3f5;
  display: flex;
  margin: 0.6rem 0.8rem 0.3rem 0.8rem;
  background-color: var(--back-color);
  border-radius: 2rem;
  .inp {
    width: 80%;
    padding: 0.3rem;
    .iconfont {
      margin-left: 1rem;
      font-size: 0.8rem;
    }
    input {
      width: calc(100% - 2rem);
      height: 100%;
      border: none;
      text-indent: 0.6rem;
      font-size: 0.6rem;
      height: 1.2rem;
      background-color: var(--back-color);
      &:focus {
        outline: none;
        border: none;
      }
    }
  }
  .button {
    width: 20%;
    color: var(--back-color);
    box-shadow: 0 0 0.1rem var(--background-theme-color);
    text-align: center;
    line-height: 2rem;
    font-size: 0.8rem;
    border-radius: 1rem;
    background-color: var(--background-theme-color);
  }
}

// 当前热门的样式
.hot-msg {
  padding: 0 0.8rem;
}
.mint-badge {
  color: #666;
  padding: 0.2rem 0.4rem;
  margin-right: 0.5rem;
  margin-left: 0;
  -webkit-transform: scale(0.9);
}

// 广告
.advertising {
  overflow: hidden;
  height: 6rem;
  margin: 0.5rem 0.8rem;
  img {
    border-radius: 0.6rem;
    width: 100%;
    height: 100%;
  }
}
.swiper-container {
  --swiper-theme-color: #f2f3f5;
}
</style>
